<template lang="pug">
transition(name="screening")
  .screening-mask(v-if="show" @click.self="close")
    .screening
      .screening-container
        .cate-col(v-for="col in categoriesList")
          .cate-col-container(v-if="col.categories.length")
            .cate-col-title {{col.label}}
            .cate-col-body
              .cate-item-row(:class="{ 'active': !col.activeId }" @click="changeTag(col)") 全部
              .cate-item-row(v-for="row in col.categories" :class="{ 'active': col.activeId === row.id }" @click="changeTag(col, row)") {{row.title}}
      .screening-footer
        a.screening-btn.btn-cancel(@click="reset") 重置
        a.screening-btn.btn-confirm(@click="confirm") 搜索
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { getMaterialCategory } from 'api'
export default {
  name: 'filterModal',
  data () {
    return {
      categoriesList: [
        {
          label: '四级分类',
          tagActive: true,
          categories: [],
          id: 'four',
          isHidden: false,
          isMore: false,
          activeId: ''
        },
        {
          label: '三级分类',
          tagActive: true,
          categories: [],
          id: 'three',
          isHidden: false,
          isMore: false,
          activeId: ''
        },
        {
          label: '二级分类',
          tagActive: true,
          categories: [],
          id: 'second',
          isHidden: false,
          isMore: false,
          activeId: ''
        },
        {
          label: '一级分类',
          tagActive: true,
          categories: [],
          id: 'first',
          isHidden: false,
          isMore: false,
          activeId: ''
        }
      ],
    }
  },
  computed: {
    ...mapState({
      show: state => state.ui.screening.show
    })
  },
  watch: {
    show (v) {
      if (v) this.getCateList()
    }
  },
  methods: {
    ...mapActions([
      'changeScreening'
    ]),
    close () {
      this.changeScreening({ show: false })
    },
    reset () {
      this.categoriesList[0].categories = []
      this.categoriesList[0].activeId = ''
      this.categoriesList[0].activeValue = ''
      this.categoriesList[1].categories = []
      this.categoriesList[1].activeId = ''
      this.categoriesList[1].activeValue = ''
      this.categoriesList[2].categories = []
      this.categoriesList[2].activeId = ''
      this.categoriesList[2].activeValue = ''
      this.categoriesList[3].activeId = ''
      this.categoriesList[3].activeValue = ''
    },
    confirm () {
      let classificationId = this.categoriesList[0].activeId || this.categoriesList[1].activeId || this.categoriesList[2].activeId || this.categoriesList[3].activeId || ''
      let currentValue = `
      ${this.categoriesList[3].activeValue ? this.categoriesList[3].activeValue : '全部'}
      ${this.categoriesList[2].activeValue ? ' > ' + this.categoriesList[2].activeValue : ''}
      ${this.categoriesList[1].activeValue ? ' > ' + this.categoriesList[1].activeValue : ''}
      ${this.categoriesList[0].activeValue ? ' > ' + this.categoriesList[0].activeValue : ''}
      `
      this.changeScreening({ show: false, classificationId, currentValue })
    },
    async getCateList () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialCategory)
        this.categoriesList[this.categoriesList.length - 1].categories = ResultSet.userData.roots
        // this.setMoreIcon(0)
      } catch (err) {
        console.log(err)
      }
    },
    changeTag (row, item = {}) {
      row.activeId = item.id || ''
      if (row.id === 'first') {
        this.categoriesList[3].activeValue = item.title
        this.getChildCate(3, item)
      } else if (row.id === 'second') {
        this.categoriesList[2].activeValue = item.title
        this.getChildCate(2, item)
      } else if (row.id === 'three') {
        this.categoriesList[1].activeValue = item.title
        this.getChildCate(1, item)
      } else if (row.id === 'four') {
        this.categoriesList[0].activeValue = item.title
        this.getChildCate(0, item)
      }
    },
    getChildCate (index, item) {
      let childIndex = index - 1
      if (childIndex >= 0) {
        this.categoriesList[childIndex].categories = item.children || []
      }
      // let len = this.categoriesList.length - 1
      // for (let i = len; i >= 0; i--) {
      //   if (i > index) {
      //     this.categoriesList[i].categories = []
      //     this.categoriesList[i].activeId = ''
      //   }
      // }
      // if (index !== 0) {
      //   this.categoriesList[index].activeId = ''
      //   this.categoriesList[index].categories = item.children || []
      //   // this.setMoreIcon(index)
      // }
      // let query = { ...this.$route.query }
      // this.categoriesList.forEach(row => {
      //   if (row.activeId) query[`${row.id}_id`] = row.activeId
      //   else delete query[`${row.id}_id`]
      // })
      // if (!query.first_id && !query.second_id && !query.three_id && !query.four_id) delete query.categorId
      // if (query.first_id && !query.second_id && !query.three_id && !query.four_id) query.categorId = query.first_id
      // if (query.second_id && !query.three_id && !query.four_id) query.categorId = query.second_id
      // if (query.three_id && !query.four_id) query.categorId = query.three_id
      // if (query.four_id) query.categorId = query.four_id
      // this.$router.replace({ name: this.$route.name, query: { ...query } })
    }
    // setMoreIcon (index) {
    //   this.$nextTick(() => {
    //     let itemHeight = this.$refs[`tag_${this.categoriesList[index].id}`][0].clientHeight
    //     if (itemHeight > 41) {
    //       this.categoriesList[index].isHidden = true
    //       this.categoriesList[index].isMore = true
    //     } else {
    //       this.categoriesList[index].isMore = false
    //     }
    //   })
    // },
  },
}
</script>

<style lang="scss" scoped>
.screening-leave-active {
  transition: opacity .3s ease;
}
.screening-enter-active,.screening-leave-active {
  opacity: 0
}
.screening-enter-active .screening,
.screening-leave-active .screening {
  transform: translateX(100%);
  opacity: 0;
}
.screening-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 8888;
  background: rgba(0,0,0,.5)
}
.screening {
  transition: all .3s;
  position: fixed;
  width: 600px;
  height: 100%;
  top: 0;
  right: 0;
  background: #f5f5f5;
  z-index: 9999;
}
.screening-container {
  display: flex;
  height: calc(100% - 60px);
}
.screening-footer {
  height: 60px;
  box-shadow: 0 -10px 20px 0 rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  font-size: 18px;
  & .btn-confirm {
    background: #CD9E78;
    color: #fff;
  }
  & .screening-btn {
    display: flex;
    height: 100%;
    width: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
}
.cate-col {
  width: 25%;
  height: 100%;
  padding: 0 10px;
  .cate-col-title {
    height: 54px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
  }
  .cate-col-container {
    height: 100%;
  }
  .cate-col-body {
    height: calc(100% - 54px);
    overflow-y: overlay;
  }
  .cate-item-row {
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7b7b7b;
    &.active {
      background: #E5E5E5;
      color: #CD9E78;
    }
  }
}
</style>